<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>html-study-02 | 静待花开</title><meta name="author" content="brad 随风起舞"><meta name="copyright" content="brad 随风起舞"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="在html文档中,所有的文本如果有开始标签就必须有结束标签.文本如果没有被标签包含被称作裸露文本或匿名文本,它将会导致文档失效 PARAGRAPHSP元素的语义就是段落的意思. HEADINGSh1到h6 有6个级别,默认大小依次减小.语义是标题头.目的是列出文章的提纲,让文章结构化便于阅读. THEMATIC BREAKS (HORIZONTAL RULE)水平线,语义是前一个主题结束下一个主题">
<meta property="og:type" content="article">
<meta property="og:title" content="html-study-02">
<meta property="og:url" content="https://zhangbo4881820.gitee.io/myblog/posts/16124/index.html">
<meta property="og:site_name" content="静待花开">
<meta property="og:description" content="在html文档中,所有的文本如果有开始标签就必须有结束标签.文本如果没有被标签包含被称作裸露文本或匿名文本,它将会导致文档失效 PARAGRAPHSP元素的语义就是段落的意思. HEADINGSh1到h6 有6个级别,默认大小依次减小.语义是标题头.目的是列出文章的提纲,让文章结构化便于阅读. THEMATIC BREAKS (HORIZONTAL RULE)水平线,语义是前一个主题结束下一个主题">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png">
<meta property="article:published_time" content="2019-11-12T01:34:44.000Z">
<meta property="article:modified_time" content="2023-09-07T09:44:01.891Z">
<meta property="article:author" content="brad 随风起舞">
<meta property="article:tag" content="HTML">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png"><link rel="shortcut icon" href="/myblog/img/favicon.png"><link rel="canonical" href="https://zhangbo4881820.gitee.io/myblog/posts/16124/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/myblog/css/index.css"><link rel="stylesheet" href="/myblog/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="/myblog/css/fancybox.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/myblog/',
  algolia: undefined,
  localSearch: {"path":"/myblog/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'html-study-02',
  isPost: true,
  isHome: false,
  isHighlightShrink: true,
  isToc: true,
  postUpdate: '2023-09-07 17:44:01'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 7.0.0-rc2"><link rel="alternate" href="/myblog/atom.xml" title="静待花开" type="application/atom+xml">
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/myblog/archives/"><div class="headline">文章</div><div class="length-num">57</div></a><a href="/myblog/tags/"><div class="headline">标签</div><div class="length-num">20</div></a><a href="/myblog/categories/"><div class="headline">分类</div><div class="length-num">25</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/myblog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 分享</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/myblog/Gallery/"><i class="fa-fw fas fa-images"></i><span> 照片</span></a></li><li><a class="site-page child" href="/myblog/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/myblog/movies/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/myblog/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="not-top-img" id="page-header"><nav id="nav"><span id="blog-info"><a href="/myblog/" title="静待花开"><span class="site-name">静待花开</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/myblog/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 分享</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/myblog/Gallery/"><i class="fa-fw fas fa-images"></i><span> 照片</span></a></li><li><a class="site-page child" href="/myblog/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/myblog/movies/"><i class="fa-fw fas fa-video"></i><span> 视频</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/myblog/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/myblog/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav></header><main class="layout" id="content-inner"><div id="post"><div id="post-info"><h1 class="post-title">html-study-02</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2019-11-12T01:34:44.000Z" title="发表于 2019-11-12 09:34:44">2019-11-12</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-09-07T09:44:01.891Z" title="更新于 2023-09-07 17:44:01">2023-09-07</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/myblog/categories/HTML/">HTML</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="html-study-02"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div><article class="post-content" id="article-container"><p><font size="4" color="048FCA">在html文档中,所有的文本如果有开始标签就必须有结束标签.文本如果没有被标签包含被称作裸露文本或匿名文本,它将会导致文档失效</font></p>
<h1 id="PARAGRAPHS"><a href="#PARAGRAPHS" class="headerlink" title="PARAGRAPHS"></a>PARAGRAPHS</h1><p>P元素的语义就是段落的意思.</p>
<h1 id="HEADINGS"><a href="#HEADINGS" class="headerlink" title="HEADINGS"></a>HEADINGS</h1><p><strong>h1</strong>到<strong>h6</strong> 有6个级别,默认大小依次减小.语义是标题头.目的是列出文章的提纲,让文章结构化便于阅读.</p>
<h1 id="THEMATIC-BREAKS-HORIZONTAL-RULE"><a href="#THEMATIC-BREAKS-HORIZONTAL-RULE" class="headerlink" title="THEMATIC BREAKS (HORIZONTAL RULE)"></a>THEMATIC BREAKS (HORIZONTAL RULE)</h1><p>水平线,语义是前一个主题结束下一个主题开始.在html5中还有装饰线的语义</p>
<h1 id="LISTS"><a href="#LISTS" class="headerlink" title="LISTS"></a>LISTS</h1><p>html提供三种列表形式:</p>
<ul>
<li><p><strong>无序列表(Unordered lists)</strong><br>没有指定顺序的条目集合</p>
</li>
<li><p><strong>有序列表(Ordered lists)</strong><br>有顺序的条目集合</p>
</li>
<li><p><strong>描述列表(Description lists)</strong><br>由名字和值一对组成,包括但不限于条目和定义</p>
</li>
</ul>
<h2 id="无序列表"><a href="#无序列表" class="headerlink" title="无序列表"></a>无序列表</h2><p>在<strong>ul</strong>开始标签和结束标签之间,只能是1个或者多个列表条目<strong>li</strong>,<code>不能出现其他元素标签</code>,并且没有被标签包裹的文本也不<br>能出现.<code>然而在**li**元素标签中你可以放置任何类型元素内容.</code> 默认的浏览器会在条目头加个子弹头,样式可以用css修改</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;ul&gt; </span><br><span class="line">&lt;li&gt;Serif&lt;/li&gt; </span><br><span class="line">&lt;li&gt;Sans-serif&lt;/li&gt; </span><br><span class="line">&lt;li&gt;Script&lt;/li&gt; </span><br><span class="line">&lt;li&gt;Display&lt;/li&gt; </span><br><span class="line">&lt;li&gt;Dingbats&lt;/li&gt; </span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>
<p><img src="/myblog/../../../../image/nonOrdered-list.png"></p>
<p>使用样式脚本你可以做出很多其他的外观.如下图:</p>
<p><img src="/myblog/../../../../image/html-nonOrdered-stylesheet.png"></p>
<h2 id="有序列表"><a href="#有序列表" class="headerlink" title="有序列表"></a>有序列表</h2><figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;ol&gt; </span><br><span class="line">&lt;li&gt;Gutenberg develops moveable type (1450s)&lt;/li&gt; </span><br><span class="line">&lt;li&gt;Linotype is introduced (1890s)&lt;/li&gt; </span><br><span class="line">&lt;li&gt;Photocomposition catches on (1950s)&lt;/li&gt; </span><br><span class="line">&lt;li&gt;Type goes digital (1980s)&lt;/li&gt; </span><br><span class="line">&lt;/ol&gt;</span><br></pre></td></tr></table></figure>
<p>和无序列表很像.但是有序列表的定义是用<strong>ol</strong>元素,并且在条目前面自动插入有序数字替换子弹头<br><img src="/myblog/../../../../image/html-ordered-list.png"></p>
<p>如果你像改变列表开始的数字,你可以使用<strong>ol</strong>元素中的<strong>start</strong>属性去指定一个起始数字</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;ol start=&quot;17&quot;&gt; </span><br><span class="line">&lt;li&gt;Highlight the text with the text tool.&lt;/li&gt; </span><br><span class="line">&lt;li&gt;Select the Character tab.&lt;/li&gt; </span><br><span class="line">&lt;li&gt;Choose a typeface from the pop-up menu.&lt;/li&gt; </span><br><span class="line">&lt;/ol&gt;</span><br></pre></td></tr></table></figure>
<p>这写条目将被17,18,19连续的数字标记</p>
<h2 id="描述列表"><a href="#描述列表" class="headerlink" title="描述列表"></a>描述列表</h2><ul>
<li><code>&lt;dl&gt;…&lt;/dl&gt;</code> <em>定义描述列表</em></li>
<li><code>&lt;dt&gt;…&lt;/dt&gt;</code> <em>名字,就像条目或标签</em></li>
<li><code>&lt;dd&gt;…&lt;/dd&gt;</code> <em>值,就像一个描述信息或者解释说明</em></li>
</ul>
<p>描述列表用于任何形式的名称和值对,例如条目和他们的解释说明,问题和答案,或者其他形式的条目和他们联系的信息.<br>整个描述列表在<strong>dl</strong>元素内.<strong>dl</strong>的列表内容是一些<strong>dt</strong>元素来指出名称和他们各自的<strong>dd</strong>元素值.一个有用的记忆方式是dt记住t想到term(条目名字),dd记住d想到description(描述信息)</p>
<p>接着给出一个例子:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;dl&gt; </span><br><span class="line">&lt;dt&gt;Linotype&lt;/dt&gt; </span><br><span class="line">&lt;dd&gt;</span><br><span class="line">Line-casting allowed type to be selected, used, then recirculated into the machine automatically. This advance increased the speed of typesetting and printing dramatically.</span><br><span class="line">&lt;/dd&gt; </span><br><span class="line">&lt;dt&gt;Photocomposition&lt;/dt&gt; </span><br><span class="line">&lt;dd&gt;</span><br><span class="line">Typefaces are stored on film then projected onto photo-sensitive paper. Lenses adjust the size of the type.</span><br><span class="line">&lt;/dd&gt; </span><br><span class="line">&lt;dt&gt;Digital type&lt;/dt&gt; </span><br><span class="line">&lt;dd&gt;</span><br><span class="line">&lt;p&gt;Digital typefaces store the outline of the font shape in a format such as Postscript. The outline may be scaled to any size for output.&lt;/p&gt; </span><br><span class="line">&lt;p&gt;Postscript emerged as a standard due to its support of graphics and its early support on the Macintosh computer and Apple laser printer.&lt;/p&gt; </span><br><span class="line">&lt;/dd&gt; </span><br><span class="line">&lt;/dl&gt;</span><br></pre></td></tr></table></figure>
<p><img src="/myblog/../../../../image/html-description-list.png"></p>
<p><strong>dl</strong>元素只允许包含<strong>dt</strong>和<strong>dd</strong>元素.不能把比如<strong>h</strong>或者其他内容组元素(像p)在<strong>dt</strong>中书写,但是值<strong>dd</strong>可以包含任何流派形式的内容.例如在例子代码中最后一个<strong>dd</strong>中放入了p元素.(这个由P默认产生尴尬的空格,可以通过css调整)</p>
<p>多种解释说明一个条目是被允许的,反之亦然.如下是可以的:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;dl&gt; </span><br><span class="line">&lt;dt&gt;Serif examples&lt;/dt&gt; </span><br><span class="line">&lt;dd&gt;Baskerville&lt;/dd&gt; </span><br><span class="line">&lt;dd&gt;Goudy&lt;/dd&gt; </span><br><span class="line">&lt;dt&gt;Sans-serif examples&lt;/dt&gt; </span><br><span class="line">&lt;dd&gt;Helvetica&lt;/dd&gt; </span><br><span class="line">&lt;dd&gt;Futura&lt;/dd&gt; </span><br><span class="line">&lt;dd&gt;Avenir&lt;/dd&gt; </span><br><span class="line">&lt;/dl&gt;</span><br></pre></td></tr></table></figure>

<h1 id="更多的内容元素"><a href="#更多的内容元素" class="headerlink" title="更多的内容元素"></a>更多的内容元素</h1><p>已经了解过paragraphs,heading,lists,但是还有一些特殊的文本元素没有说:</p>
<ul>
<li><p>(Long Quotations)<strong>blockquote</strong></p>
</li>
<li><p>(Preformatted Text)<strong>pre</strong></p>
</li>
<li><p><strong>figure和figcaption</strong></p>
</li>
</ul>
<p>这些元素在HTML5版本中做一个共同的事情就是做”内容分组”(和<strong>P,hr,list元素,main,div一起</strong>),还有就是浏览器默认的把他们当作块级元素来展示. </p>
<p>有一个差别就是新的<strong>main</strong>元素不被任何版本的IE浏览器识别,虽然他在Edge浏览器中被支持.</p>
<h2 id="Long-Quotations"><a href="#Long-Quotations" class="headerlink" title="Long Quotations"></a>Long Quotations</h2><p>如果你有一个长引用,一个证明书,或者其他资源拷贝过来的部分,就使用<strong>blockquote</strong>元素标记它,这个元素之中也推荐包含其他内容元素.如下例子:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;p&gt;Renowned type designer, Matthew Carter, has this to say about his profession:&lt;/p&gt; </span><br><span class="line">&lt;blockquote&gt; </span><br><span class="line">&lt;p&gt;Our alphabet hasn&#x27;t changed in eons; there isn&#x27;t much latitude in what a designer can do with the individual letters.&lt;/p&gt; </span><br><span class="line">&lt;p&gt;Much like a piece of classical music, the score is written down. It&#x27;s not something that is tampered with, and yet, each conductor interprets that score differently. There is tension in the interpretation.&lt;/p&gt; </span><br><span class="line">&lt;/blockquote&gt;</span><br></pre></td></tr></table></figure>
<p>渲染效果如下</p>
<p><img src="/myblog/../../../../image/html-content-blackquote-render.png"></p>
<h2 id="Preformatted-Text"><a href="#Preformatted-Text" class="headerlink" title="Preformatted Text"></a>Preformatted Text</h2><p>使用预格式化文本<strong>pre</strong>元素,对于内容来说格式(空格换行等)是具有语义意义的.这是一个独特的元素，因为它的显示方式与键入时完全一样，包括所有回车符和多个字符空格.默认的,预格式化文本使用等宽字体展示.下面给出代码例子:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;pre&gt; </span><br><span class="line">This is 							an 							example of </span><br><span class="line">		text with a 									lot of </span><br><span class="line">														curious </span><br><span class="line">														whitespace. </span><br><span class="line">&lt;/pre&gt; </span><br><span class="line">&lt;p&gt; </span><br><span class="line">This is 							an 							example of </span><br><span class="line">		text with a </span><br><span class="line">														lot of </span><br><span class="line">														curious </span><br><span class="line">														whitespace. </span><br><span class="line">&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<p><img src="/myblog/../../../../image/html-content-pre-render.png"></p>
<h2 id="Figures"><a href="#Figures" class="headerlink" title="Figures"></a>Figures</h2><ul>
<li><code>&lt;figure&gt;…&lt;/figure&gt;</code> <em>关联图片或者资源</em></li>
<li><code>&lt;figcaption&gt;…&lt;/figcaption&gt;</code> <em>figure的文本描述信息</em></li>
</ul>
<p>figure元素识别在文本中说明或支持的一些点的内容.一个figure元素标签里可以包含很多web内容,例如图片,video,代码片段,文本甚至是表格.figure元素应该被当作一种容器.这就意味着,这个容器放哪都具有相同意义.因为取决于容器中装的内容.</p>
<p>可以简单的使用<strong>figure</strong>元素标签来包裹图片元素.</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;figure&gt;</span><br><span class="line">	&lt;img src=&quot;piechart.png&quot; alt=&quot;chart showing font on mobile devices&quot;&gt;</span><br><span class="line">&lt;/figure&gt;</span><br></pre></td></tr></table></figure>
<p>如果想为这个figure容器提供一个文本标题,使用<strong>figcaption</strong>元素在<strong>figure</strong>元素里的内容上面或者下面添加.这是比单纯的加个<strong>p</strong>元素更富有语义的标记.</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;figure&gt; </span><br><span class="line">	&lt;pre&gt; </span><br><span class="line">		&lt;code&gt; </span><br><span class="line">	body &#123; </span><br><span class="line">		background-color: #000; </span><br><span class="line">		color: red; </span><br><span class="line">	&#125; 	&lt;/code&gt; </span><br><span class="line">	&lt;/pre&gt; </span><br><span class="line">&lt;figcaption&gt;Sample CSS rule.&lt;/figcaption&gt; </span><br><span class="line">&lt;/figure&gt;</span><br></pre></td></tr></table></figure>
<p><em><strong>figure</strong>和<strong>figcaption</strong>元素在IE8版本及以下不支持.</em></p>
<h1 id="组织页面内容"><a href="#组织页面内容" class="headerlink" title="组织页面内容"></a>组织页面内容</h1><p>几乎所有的浏览器都支持html5的语义元素.这些元素不会告诉浏览器去格式化为一个块级别的元素.他们的行为特性完全由你通过CSS来定义.<em>在IE8版本及以下不支持.<strong>但是</strong>Remy Sharp做了贡献.可以在头部引入下面的文件.那么低版本IE也能定制新元素</em></p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;!-- 如过小于IE9.0 --&gt;</span><br><span class="line">&lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/ html5shiv.min.js&quot;&gt; </span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>HTML5 Shiv还是Modernizr polyfill脚本的一部分，该脚本向较旧的不支持的浏览器添加了HTML5和CSS3功能.<br>该在线网址为(<a href="https://modernizr.com/">https://modernizr.com/</a>)</p>
<p>使用style sheet定义新元素为块级元素</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">section, article, nav, aside, header, footer, main &#123; display: block; &#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="html5的新元素"><a href="#html5的新元素" class="headerlink" title="html5的新元素"></a>html5的新元素</h2><p>给经典网页或者应用部分赋予语义意义,如以下元素:</p>
<ul>
<li><p><strong>main</strong><br><code>&lt;main&gt;…&lt;/main&gt;</code> 用来展示网页或者app主要内容的语义标签.W3C HTML5组织指出页面只能包含一个<strong>main</strong>部分并且它不应该<br>被嵌入<strong>article,aside,nav,header,footer</strong>.如果这么干会导致文档无效</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;body&gt; </span><br><span class="line">&lt;header&gt;…&lt;/header&gt; </span><br><span class="line">&lt;main&gt; </span><br><span class="line">&lt;h1&gt;Humanist Sans Serif&lt;/h1&gt; </span><br><span class="line">&lt;!-- code continues --&gt; </span><br><span class="line">&lt;/main&gt; </span><br><span class="line">&lt;/body&gt;</span><br></pre></td></tr></table></figure></li>
<li><p><strong>header和footer</strong><br><font size="6" color="F92472">Header</font><br>这<strong>header</strong>被用于介绍材料,典型的在页面开始的地方或者区域顶部或者文章顶部出现.没有指定<strong>header</strong>元素必须或者应该包含什么.任何有作为向一个网页或者区域介绍意义的都可以被放入<strong>header</strong>中.下面的例子中给出文档的header包含一个logo图片,站点标题,导航信息.</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;body&gt; </span><br><span class="line">	&lt;header&gt; </span><br><span class="line">		&lt;img src=&quot;/images/logo.png&quot; alt=&quot;logo&quot;&gt; </span><br><span class="line">		&lt;h1&gt;Nuts about Web Fonts&lt;/h1&gt;</span><br><span class="line">		&lt;nav&gt; </span><br><span class="line">			&lt;ul&gt; </span><br><span class="line">				&lt;li&gt;</span><br><span class="line">					&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;</span><br><span class="line">				&lt;/li&gt; </span><br><span class="line">				&lt;li&gt;</span><br><span class="line">					&lt;a href=&quot;/&quot;&gt;Blog&lt;/a&gt;</span><br><span class="line">				&lt;/li&gt; </span><br><span class="line">				&lt;li&gt;</span><br><span class="line">					&lt;a href=&quot;/&quot;&gt;Shop&lt;/a&gt;</span><br><span class="line">				&lt;/li&gt; </span><br><span class="line">			&lt;/ul&gt; </span><br><span class="line">		&lt;/nav&gt; </span><br><span class="line">	&lt;/header&gt; </span><br><span class="line">&lt;!--page content--&gt; </span><br><span class="line">&lt;/body&gt;</span><br></pre></td></tr></table></figure>
<p><em>header和footer内部都不能在嵌入header和footer</em><br><font size="6" color="F92472">footer</font><br>页脚元素用于指示通常出现在页面或文章末尾的信息类型，例如其作者，版权信息，相关文档或导航。页脚元素可以应用于整个文档，也可以与特定部分或文章相关联。如果页脚直接包含在body元素内（在所有其他正文内容之前或之后），则它将应用于整个页面或应用程序。<br>如果它包含在sectioning元素（section，article，nav或aside）中，则将其解析为该部分的页脚。请注意，尽管它被称为“页脚”，但并不要求它必须出现在文档或切片元素的最后。如果可以的话，它也可以出现在开始处或附近。<br>下面这个例子一些典型的信息被列入在文档在底部.用footer修饰语义文章底部</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;article&gt; </span><br><span class="line">	&lt;header&gt; </span><br><span class="line">		&lt;h1&gt;More about WOFF&lt;/h1&gt; </span><br><span class="line">		&lt;p&gt;by Jennifer Robbins, &lt;time datetime=&quot;2017-11-11&quot;&gt;November 11, 2017&lt;/time&gt;&lt;/p&gt; </span><br><span class="line">	&lt;/header&gt; </span><br><span class="line">	&lt;!-- article content here --&gt; </span><br><span class="line">	&lt;footer&gt; </span><br><span class="line">		&lt;p&gt;</span><br><span class="line">			&lt;small&gt;Copyright &amp;copy;2017 Jennifer Robbins.&lt;/small&gt;</span><br><span class="line">		&lt;/p&gt;</span><br><span class="line">		&lt;nav&gt; </span><br><span class="line">			&lt;ul&gt; </span><br><span class="line">				&lt;li&gt;&lt;a href=&quot;/&quot;&gt;Previous&lt;/a&gt;</span><br><span class="line">				&lt;/li&gt; </span><br><span class="line">				&lt;li&gt;&lt;a href=&quot;/&quot;&gt;Next&lt;/a&gt;</span><br><span class="line">				&lt;/li&gt; </span><br><span class="line">			&lt;/ul&gt; </span><br><span class="line">		&lt;/nav&gt; </span><br><span class="line">	&lt;/footer&gt; </span><br><span class="line">&lt;/article&gt;</span><br></pre></td></tr></table></figure></li>
<li><p><strong>section和article</strong><br><code>&lt;section&gt;…&lt;/section&gt;</code>主题内容组<br><code>&lt;article&gt;…&lt;/article&gt;</code>独立容器,可复用组件<br>将长文档分成较小的部分时，更易于使用。例如，书籍分为几章，报纸则包含有关本地新闻，体育，漫画等的章节。要将较长的Web文档划分为主题部分，请使用适当命名的section元素。<br>section元素具有广泛的用途，既可以将整个页面分为多个主要部分，也可以在单个文章中标识主题部分。在以下示例中，基于资源类型将包含有关排版资源信息的文档分为两部分:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;section&gt; </span><br><span class="line">	&lt;h2&gt;Typography Books&lt;/h2&gt; </span><br><span class="line">	&lt;ul&gt; </span><br><span class="line">		&lt;li&gt;…&lt;/li&gt; </span><br><span class="line">	&lt;/ul&gt; </span><br><span class="line">&lt;/section&gt; </span><br><span class="line">&lt;section&gt; </span><br><span class="line">	&lt;h2&gt;Online Tutorials&lt;/h2&gt; </span><br><span class="line">	&lt;p&gt;These are the best tutorials on the web.&lt;/p&gt; </span><br><span class="line">	&lt;ul&gt; </span><br><span class="line">		&lt;li&gt;…&lt;/li&gt; </span><br><span class="line">	&lt;/ul&gt; </span><br><span class="line">&lt;/section&gt;</span><br></pre></td></tr></table></figure>
<p>从另一个方面来看,<strong>section</strong>可能由一系列articles组成</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;section id=&quot;essays&quot;&gt; </span><br><span class="line">	&lt;article&gt; </span><br><span class="line">		&lt;h1&gt;A Fresh Look at Futura&lt;/h1&gt; </span><br><span class="line">		&lt;p&gt;…&lt;/p&gt; </span><br><span class="line">	&lt;/article&gt; </span><br><span class="line">	&lt;article&gt; </span><br><span class="line">		&lt;h1&gt;Getting Personal with Humanist&lt;/h1&gt; </span><br><span class="line">		&lt;p&gt;…&lt;/p&gt; </span><br><span class="line">	&lt;/article&gt; </span><br><span class="line">&lt;/section&gt;</span><br></pre></td></tr></table></figure>
<p>这个<strong>section</strong>和<strong>article</strong>元素很容易让人困惑.尤其是他们可以相互内嵌.记住这点,如果内容本身是独立容器的并且能出现在当前上下文的外部,最好是用<strong>article</strong>标记.<br><code>HTML5规范建议，如果对元素进行分组的目的仅仅是为了提供样式钩子，请改用通用div元素</code></p>
</li>
<li><p><strong>aside(侧边栏)</strong><br><code>&lt;aside&gt;…&lt;/aside&gt;</code> 语义是附带相关材料.<br>侧边栏是使用aside元素的良好心理模型.aside可以用于拉引号，背景信息，链接列表，标注或任何其他可能与文档相关联（但并不关键）的内容.<br>在这个例子中,<strong>aside</strong>被用于提供与文章主题相关的链接列表:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;h1&gt;Web Typography&lt;/h1&gt; </span><br><span class="line">&lt;p&gt;Back in 1997, there were competing font formats and tools for making them…&lt;/p&gt; </span><br><span class="line">&lt;p&gt;We now have a number of methods for using beautiful fonts on web pages…&lt;/p&gt; </span><br><span class="line">&lt;aside&gt; </span><br><span class="line">	&lt;h2&gt;Web Font Resources&lt;/h2&gt; </span><br><span class="line">	&lt;ul&gt; </span><br><span class="line">		&lt;li&gt;&lt;a href=&quot;http://typekit.com/&quot;&gt;Typekit&lt;/a&gt;&lt;/li&gt; </span><br><span class="line">		&lt;li&gt;&lt;a href=&quot;http://fonts.google.com&quot;&gt;Google Fonts&lt;/a&gt;&lt;/li&gt; </span><br><span class="line">	&lt;/ul&gt; </span><br><span class="line">&lt;/aside&gt;</span><br></pre></td></tr></table></figure>
<p>这<strong>aside</strong>默认是没有样式渲染的.需要使用样式脚本规则去设置为块级元素以及调整外观还有布局</p>
</li>
<li><p><strong>Navigation</strong><br>这个<strong>nav</strong>元素给开发者一种语义的方式去为站点识别导航.之前列表可以被用作顶级导航.把这个列表包装在<strong>nav</strong>中使得语义更清晰</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;nav&gt; </span><br><span class="line">	&lt;ul&gt; </span><br><span class="line">		&lt;li&gt;&lt;a href=&quot;/&quot;&gt;Serif&lt;/a&gt;&lt;/li&gt; </span><br><span class="line">		&lt;li&gt;&lt;a href=&quot;/&quot;&gt;Sans-serif&lt;/a&gt;&lt;/li&gt; </span><br><span class="line">		&lt;li&gt;&lt;a href=&quot;/&quot;&gt;Script&lt;/a&gt;&lt;/li&gt; </span><br><span class="line">		&lt;li&gt;&lt;a href=&quot;/&quot;&gt;Display&lt;/a&gt;&lt;/li&gt; </span><br><span class="line">		&lt;li&gt;&lt;a href=&quot;/&quot;&gt;Dingbats&lt;/a&gt;&lt;/li&gt; </span><br><span class="line">	&lt;/ul&gt; </span><br><span class="line">&lt;/nav&gt;</span><br></pre></td></tr></table></figure></li>
<li><p><strong>address</strong><br><code>&lt;address&gt;…&lt;/address&gt;</code> 表示联系信息的语义<br>这个<strong>address</strong>元素用于为文档的作者或者维护者的联系信息创建一块区域.通常这个元素放置在文档的结尾处,或者section或者article中.在页脚元素中地址正确指向是家.<strong>address</strong>元素不因该被用于任何旧地址,例如邮件地址.它只针对作者联系信息(尽管可能是邮寄地址)下面有个例子:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;address&gt; </span><br><span class="line">	Contributed by &lt;a href=&quot;../authors/robbins/&quot;&gt;Jennifer Robbins&lt;/a&gt;, </span><br><span class="line">	&lt;a href=&quot;http://www.oreilly.com/&quot;&gt;O&#x27;Reilly Media&lt;/a&gt; </span><br><span class="line">&lt;/address&gt;</span><br></pre></td></tr></table></figure></li>
</ul>
<h1 id="行内元素集合"><a href="#行内元素集合" class="headerlink" title="行内元素集合"></a>行内元素集合</h1><p>HTML5对行内元素的标准称呼为<code>text-level semantic elements</code><br>所谓行内元素就是他们可以处于同一行,不会换行.下面的表格列举出行内元素:</p>
<table>
<thead>
<tr>
<th>元素</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>a</td>
<td>一个定位的锚或者超文本链接</td>
</tr>
<tr>
<td>abbr</td>
<td>缩写形式</td>
</tr>
<tr>
<td>b</td>
<td>增加视觉注意,粗体效果</td>
</tr>
<tr>
<td>bdi</td>
<td>表示文本需要一个方向</td>
</tr>
<tr>
<td>bdo</td>
<td>清晰的表示文本的方向是左到右(ltr)还是右到左(rtl)</td>
</tr>
<tr>
<td>br</td>
<td>换行</td>
</tr>
<tr>
<td>cite</td>
<td>引用;一个工作标题的引用,例如一本书的标题</td>
</tr>
<tr>
<td>code</td>
<td>计算机代码样品</td>
</tr>
<tr>
<td>del</td>
<td>删除文本;表示对文档进行的编辑</td>
</tr>
<tr>
<td>dfn</td>
<td>定义一个实例,或者一个条目的首次发生</td>
</tr>
<tr>
<td>em</td>
<td>强调文本用的.</td>
</tr>
<tr>
<td>i</td>
<td>斜体</td>
</tr>
<tr>
<td>ins</td>
<td>插入文本;表明在文档中的一种插入</td>
</tr>
<tr>
<td>kbd</td>
<td>键盘;文本被用户使用键盘输入</td>
</tr>
<tr>
<td>mark</td>
<td>做标记.就是上下文相关的文本.</td>
</tr>
<tr>
<td>q</td>
<td>快捷,行内引用</td>
</tr>
<tr>
<td>ruby,rt,rp</td>
<td>在东亚字体和表意文字下提供注释或发音指南。</td>
</tr>
<tr>
<td>s</td>
<td>错误文本(贯穿线效果strike-through)</td>
</tr>
<tr>
<td>smap</td>
<td>程序输出的样本</td>
</tr>
<tr>
<td>small</td>
<td>展示更小的字体.用于展示版权信息等</td>
</tr>
<tr>
<td>span</td>
<td>通用的短语内容</td>
</tr>
<tr>
<td>strong</td>
<td>重要内容</td>
</tr>
<tr>
<td>sub</td>
<td>下标记(Subscript)</td>
</tr>
<tr>
<td>sup</td>
<td>上标记(Superscript)</td>
</tr>
<tr>
<td>time</td>
<td>计算机可读时间数据</td>
</tr>
<tr>
<td>u</td>
<td>下划线.表示要加下划线的正式名称，拼写错误的单词或文本</td>
</tr>
<tr>
<td>var</td>
<td>变量或程序参数.</td>
</tr>
<tr>
<td>wbr</td>
<td>word break</td>
</tr>
</tbody></table>
<h2 id="Emphasized-text"><a href="#Emphasized-text" class="headerlink" title="Emphasized text"></a>Emphasized text</h2><p>强调文本.使用<code>em</code>元素指定需要强调的文本.下面的代码就是表达了强调谁(Arlo)最聪明,强调了有多么(very)聪明.</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;p&gt;&lt;em&gt;Arlo&lt;/em&gt; is very smart.&lt;/p&gt; </span><br><span class="line">&lt;p&gt;Arlo is &lt;em&gt;very&lt;/em&gt; smart.&lt;/p&gt;</span><br></pre></td></tr></table></figure>

<p><code>em</code>默认的总是展示斜体来表达强调.当然你可以使用style sheet让它以任何方式展示.这目的不是为了斜体样式什么的,主要就是为了语义上的强调意义.</p>
<h2 id="Important-text"><a href="#Important-text" class="headerlink" title="Important text"></a>Important text</h2><p><code>strong</code>元素用来表示单词或者语句是重要的,严重的,紧迫的.在下面的例子中<strong>strong</strong>元素识别了需要额外注意的结构部分.</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;p&gt;When returning the car, &lt;strong&gt;drop the keys in the red box by </span><br><span class="line">the front desk&lt;/strong&gt;.&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<p>默认情况下,被<strong>strong</strong>修饰的文本在浏览器中以粗体(bold)展示.这主要目的让它具备重要的语义意义,而不是粗体.</p>
<p>下面图片是展示浏览器渲染的外观.<br><img src="/myblog/../../../../image/html-inline-element-render.png"></p>
<h2 id="b"><a href="#b" class="headerlink" title="b"></a>b</h2><p>关键字,产品名字,或者其他需要突出的文本.默认是粗体.CSS属性就是<code>font-weight:bold</code></p>
<h2 id="i"><a href="#i" class="headerlink" title="i"></a>i</h2><p>表示文本是具有不同的发音或语境相比其他文本.默认是斜体.CSS属性就是<code>font-style:italic</code></p>
<h2 id="s"><a href="#s" class="headerlink" title="s"></a>s</h2><p>表示错误文本,默认是删除线.CSS属性就是<code>text-decoration: line-through</code></p>
<h2 id="u"><a href="#u" class="headerlink" title="u"></a>u</h2><p>下划线,可以表达单词拼写错误等语义.默认是下划线.CSS属性就是<code>text-decoration: underline</code></p>
<h2 id="small"><a href="#small" class="headerlink" title="small"></a>small</h2><p>更小的字体.用来表示正文的附录或旁注，例如文档底部的合法“小字.CSS属性就是<code>font-size: 80%</code></p>
<p>浏览器效果如下图:<br><img src="/myblog/../../../../image/html-inline-element-iussmall.png"></p>
<h2 id="Short-quotations"><a href="#Short-quotations" class="headerlink" title="Short quotations"></a>Short quotations</h2><p>短引用,使用<strong>q</strong>元素来标记.效果就是在被包裹的文本两头加双引号.代码和效果如下:<br><code>Matthew Carter says, &lt;q&gt;Our alphabet hasn&#39;t changed in eons.&lt;/q&gt;</code><br><img src="/myblog/../../../../image/html-quotation-render.png"></p>
<h2 id="Abbreviations-and-acronyms"><a href="#Abbreviations-and-acronyms" class="headerlink" title="Abbreviations and acronyms"></a>Abbreviations and acronyms</h2><p>缩略词,标记缩略词使用<strong>abbr</strong>元素为搜索引擎提供有用的信息.代码演示入下:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;abbr title=&quot;Points&quot;&gt;pts.&lt;/abbr&gt; </span><br><span class="line">&lt;abbr title=&quot;American Type Founders&quot;&gt;ATF&lt;/abbr&gt;</span><br></pre></td></tr></table></figure>
<h2 id="Citations"><a href="#Citations" class="headerlink" title="Citations"></a>Citations</h2><p>引文,<strong>cite</strong>元素被用于识别对另一个文档的引用,例如书,杂志,文章标题,等等.默认的渲染效果是斜体.代码如下:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;p&gt;Passages of this article were inspired by &lt;cite&gt;The Complete Manual of Typography&lt;/cite&gt; by James Felici.&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<h2 id="Defining-terms"><a href="#Defining-terms" class="headerlink" title="Defining terms"></a>Defining terms</h2><p>定义条目,使用<strong>dfn</strong>元素,普遍的用途是在文档中漂亮的首次指出并定义单词实例.默认效果是斜体.代码入下:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;p&gt;&lt;dfn&gt;Script typefaces&lt;/dfn&gt; are based on handwriting.&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<h2 id="Program-code-elements"><a href="#Program-code-elements" class="headerlink" title="Program code elements"></a>Program code elements</h2><p>程序代码元素.一组行内元素用来描述技术文档的一部分.例如代码:<strong>code</strong>,变量:<strong>var</strong>,程序例子:<strong>samp</strong>,用户敲击键盘键入:<strong>kbd</strong></p>
<p>code,samp,kbd元素默认的渲染成一个等宽字体.var通常是斜体</p>
<h2 id="Subscript-and-SuperScript"><a href="#Subscript-and-SuperScript" class="headerlink" title="Subscript and SuperScript"></a>Subscript and SuperScript</h2><p>就是下标(<strong>sub</strong>)和上标(<strong>sup</strong>)元素,它让被选中的文本以更小字体展示,并且<strong>sub</strong>位置在下,<strong>sup</strong>位置在上,相对于基本线.这个元素可能对化学公式和数学等式很有帮助.代码和效果如下:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;p&gt;H&lt;sub&gt;2&lt;/sub&gt;0&lt;/p&gt; </span><br><span class="line">&lt;p&gt;E=MC&lt;sup&gt;2&lt;/sup&gt;&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<p>H<sub>2</sub>0</p> 
<p>E=MC<sup>2</sup></p>

<h2 id="Highlighted-text"><a href="#Highlighted-text" class="headerlink" title="Highlighted text"></a>Highlighted text</h2><p>高亮文本,<strong>mark</strong>元素指明一个词语对于读者来说有特殊相关性.可能会在页面返回结果中使用它去动态的高亮一个搜索条目代码效果如下:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;p&gt; ... PART I. ADMINISTRATION OF THE GOVERNMENT. TITLE IX. </span><br><span class="line">TAXATION. CHAPTER 65C. MASS. &lt;mark&gt;ESTATE TAX&lt;/mark&gt;. Chapter 65C: Sect. 2. </span><br><span class="line">Computation of &lt;mark&gt;estate tax&lt;/mark&gt;.&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<p> ... PART I. ADMINISTRATION OF THE GOVERNMENT. TITLE IX. 
TAXATION. CHAPTER 65C. MASS. <mark>ESTATE TAX</mark>. Chapter 65C:Sect. 2. 
Computation of <mark>estate tax</mark>.</p>

<h2 id="Dates-and-times"><a href="#Dates-and-times" class="headerlink" title="Dates and times"></a>Dates and times</h2><p>日期时间,<strong>time</strong>元素允许我们用一种舒适阅读日期和时间的方式去标记日期时间.元素的内容为人提供信息,并且属性<strong>datatime</strong>以机器可读的方式提供相同的信息.</p>
<p>这个<strong>time</strong>元素可能被用于搜索引擎去搜索最近发布的文章.</p>
<p>这个<strong>datetime</strong>属性用标准格式指定日期时间.完整的日期格式为(年-月-日).时间部分以<q>T</q>标志开头后面接着一个列时,分,秒(可选),毫秒(可选).最后是时区,在小时前面加(-)或者(+)意味着低于或高于GMT时区多少小时.标准时间符号如下图:<br><img src="/myblog/../../../../image/html-time-date-standal.png"></p>
<p>接下来给出代码例子.其中文本时间和datatime属性时间是有效的</p>
<ul>
<li>只有时间: 9:30 p.m.<br><code>&lt;time datetime=&quot;21:30&quot;&gt;9:30p.m.&lt;/time&gt;</code></li>
<li>只有日期: June 19,2016<br><code>&lt;time datetime=&quot;2016-06-19&quot;&gt;June 19, 2016&lt;/time&gt;</code></li>
<li>日期和时间: Sept. 5, 1970, 1:11a.m.<br><code>&lt;time datetime=&quot;1970-09-05T01:11:00&quot;&gt;Sept. 5,1970,1:11a.m.&lt;/time&gt;</code></li>
<li>日期时间和时区: 8:00am on July 19,2015,in Providence,RI<br><code>&lt;time datetime=&quot;2015-07-19T08:00:00-05:00&quot;&gt;July 19, 2015, 8am, Providence RI&lt;/time&gt;</code></li>
</ul>
<h2 id="Machine-readable-information"><a href="#Machine-readable-information" class="headerlink" title="Machine-readable information"></a>Machine-readable information</h2><p>机器可读信息,<strong>data</strong>元素这是帮助电脑弄懂内容的意思.可以用于任何数据类型.这元素需要一个<strong>value</strong>属性为机器可读提供信息.</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;data value=&quot;12&quot;&gt;Twelve&lt;/data&gt; </span><br><span class="line">&lt;data value=&quot;978-1-449-39319-9&quot;&gt;CSS: The Definitive Guide&lt;/data&gt;</span><br></pre></td></tr></table></figure>
<p>在这里不详细讨论<strong>data</strong>细节.</p>
<h2 id="Inserted-and-deleted-text"><a href="#Inserted-and-deleted-text" class="headerlink" title="Inserted and deleted text"></a>Inserted and deleted text</h2><p>插入和删除文本,<strong>ins</strong>和<strong>del</strong>元素标注一个可编辑文档去指出哪些内容是插入或删除的.这些元素依赖CSS去设置样式.默认没有样式.这两个元素都能既包含行内元素也能包含块级元素.</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">Chief Executive Officer: &lt;del title=&quot;retired&quot;&gt;Peter Pan&lt;/del&gt;&lt;ins&gt;Pippi Longstocking&lt;/ins&gt;</span><br></pre></td></tr></table></figure>
<p>语义是:首席执行官Peter Pan退休,Pippi Longstocking上任.</p>
<h2 id="Adding-Breaks"><a href="#Adding-Breaks" class="headerlink" title="Adding Breaks"></a>Adding Breaks</h2><p>就是换行元素.<strong>br</strong>这是个空元素,没有内容,加了这元素就是换行.</p>
<p>但是<strong>br</strong>元素很容易滥用.举个例子</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;p&gt;Times&lt;br&gt; </span><br><span class="line">Georgia&lt;br&gt; </span><br><span class="line">Garamond </span><br><span class="line">&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<p>这就是错误用法.正确因该是用lists列表来做.</p>
<h1 id="通用元素-DIV和SPAN"><a href="#通用元素-DIV和SPAN" class="headerlink" title="通用元素(DIV和SPAN)"></a>通用元素(DIV和SPAN)</h1><p><strong>div</strong>是通用块元素,<strong>span</strong>是通用行内元素.都带有<strong>id</strong>和<strong>class</strong>属性.<strong>span</strong>指出一个没有文本级别元素存在的单词或语句.<strong>div</strong>指出一个单独的内容块.</p>
<p>这两个元素默认没有样式.需要用CSS去设置.非常有用,作为一个单独容器存在,可以让WEB开发者非常好的布局,准确描述内容.</p>
<h2 id="使用div分隔内容"><a href="#使用div分隔内容" class="headerlink" title="使用div分隔内容"></a>使用div分隔内容</h2><p>使用<strong>div</strong>元素去创建一个内容或元素的逻辑组.这意味着,这个DIV指出内部的一切都是属于一个概念单位的.</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;div class=&quot;listing&quot;&gt; </span><br><span class="line">&lt;img src=&quot;images/felici-cover.gif&quot; alt=&quot;&quot;&gt; </span><br><span class="line">&lt;p&gt;</span><br><span class="line">&lt;cite&gt;The Complete Manual of Typography&lt;/cite&gt;, James Felici&lt;/p&gt; </span><br><span class="line">&lt;p&gt;A combination of type history and examples of good and bad type design.&lt;/p&gt; </span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>把这一堆放进这个div,使得里面的元素之间具有清晰的相关概念.</p>
<h2 id="使用span定义语句"><a href="#使用span定义语句" class="headerlink" title="使用span定义语句"></a>使用span定义语句</h2><p>和div一样的好处,区别就是他是行内的元素,并且被用于造句的元素.因为它里面一般包含的就是纯文本.如下例子</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;ul&gt; </span><br><span class="line">&lt;li&gt;John: &lt;span class=&quot;tel&quot;&gt;999.8282&lt;/span&gt;&lt;/li&gt; </span><br><span class="line">&lt;li&gt;Paul: &lt;span class=&quot;tel&quot;&gt;888.4889&lt;/span&gt;&lt;/li&gt; </span><br><span class="line">&lt;li&gt;George: &lt;span class=&quot;tel&quot;&gt;888.1628&lt;/span&gt;&lt;/li&gt; </span><br><span class="line">&lt;li&gt;Ringo: &lt;span class=&quot;tel&quot;&gt;999.3220&lt;/span&gt;&lt;/li&gt; </span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>
<h2 id="id-and-class-Attributes"><a href="#id-and-class-Attributes" class="headerlink" title="id and class Attributes"></a>id and class Attributes</h2><p><strong>id</strong>属性是一个元素在文档中唯一的一个识别标识.也就是id值是唯一的.<br><strong>class</strong>属性是把元素分为一类的概念.所有它的值是可以有多个相同的,相同代表一类元素概念.<br>这两个属性不单单应用在span和div上,他们是全局属性.有关全局属性看下面:</p>
<h3 id="全局属性"><a href="#全局属性" class="headerlink" title="全局属性"></a>全局属性</h3><p>html5定义的全局属性可以用于每个html元素身上:accesskey,class,contenteditable,dir,draggable,hidden,id,lang,spellcheck,style,tabindex,title,translate.</p>
<h1 id="使用ARIA来改善访问性"><a href="#使用ARIA来改善访问性" class="headerlink" title="使用ARIA来改善访问性"></a>使用ARIA来改善访问性</h1><p>对于web开发,我们必须考虑用户的体验性,如技术支撑导航页,人机交互等.单独的html标记元素并不能提供线索作为这个元素该怎么使用或者当前表单是否被选中,是否必须等.</p>
<p>幸运的是,我们有<span style="color:blue">ARIA</span>(Accessible Rich Internet Applications),他有一系列标准的属性去让页面更简单的使用导航,交互特性.它由Working Group of the Web Accessibility Initiative(WAI)组织创建维护.ARIA定义了<font color="1FA6CD">roles</font>,<font color="1FA6CD">states</font>,和<font color="1FA6CD">properties</font>,这些属性可以让标记和脚本拥有更丰富的语义信息.</p>
<h2 id="Roles"><a href="#Roles" class="headerlink" title="Roles"></a>Roles</h2><p><font color="1FA6CD">roles</font>在文档上下文中描述了元素的功能或目的.一些roles包括了<strong>alert</strong>,<strong>button</strong>,<strong>dialog</strong>,<strong>slider</strong>,<strong>menubar</strong>这些名字.如下面的例子:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;ul id=&quot;tabs&quot; role=&quot;toolbar&quot;&gt; </span><br><span class="line">&lt;li&gt;A-G&lt;/li&gt; </span><br><span class="line">&lt;li&gt;H-O&lt;/li&gt; </span><br><span class="line">&lt;li&gt;P-T&lt;/li&gt; </span><br><span class="line">&lt;li&gt;U-Z&lt;/li&gt; </span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>
<p>这个例子就是用<code>role=toolbar</code>来明确说明这个列表是用来做工具条的.</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;div id=&quot;status&quot; role=&quot;alert&quot;&gt;You are no longer connected to the server.&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>这个例子就是用<code>role=&quot;alert&quot;</code>来明确说明这个div是用法发出警告信息的.有些role表示的功能语义可以用html5的新标签替换如下:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;nav role=&quot;navigation&quot;&gt; </span><br><span class="line">&lt;header role=&quot;banner&quot;&gt; //整个文档中只有一个header </span><br><span class="line">&lt;main role=&quot;main&quot;&gt; </span><br><span class="line">&lt;aside role=&quot;complementary&quot;&gt; </span><br><span class="line">&lt;footer role=&quot;contentinfo&quot;&gt;</span><br></pre></td></tr></table></figure>
<h2 id="States和Properties"><a href="#States和Properties" class="headerlink" title="States和Properties"></a>States和Properties</h2><p>Aria也定义了一长串状态和属性,这些被应用于元素的交互,例如表单小部件,动态内容.状态和属性用<strong>aria-<strong>前缀表示,例如</strong>aria-disabled</strong>等等.</p>
<p>属性和状态之间的区别是细微的.对于属性,属性的值大部分是稳定的,例如<strong>aria-labelledby</strong>,它用他们对应的表单控件来关联标签,又如<strong>aria-haspopup</strong>,它表明元素有个相关弹出菜单.而状态的值大部分是变化的作为用户和元素交互用的,例如<strong>aria-selected</strong></p>
<p>显然,知道这些并不够很好的使用他们.如果向深入学习aria可以访问如下网址:</p>
<ul>
<li><p><a href="https://www.w3.org/TR/wai-aria-1.1/">The WAI-ARIA Working Draft</a></p>
</li>
<li><p><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></p>
</li>
<li><p><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/">ARIA Resources at MDN Web Docs</a></p>
</li>
<li><p><a href="https://www.html5accessibility.com/">HTML5 Accessibility</a></p>
</li>
</ul>
<h1 id="字符转义-CHARACTER-ESCAPES"><a href="#字符转义-CHARACTER-ESCAPES" class="headerlink" title="字符转义(CHARACTER ESCAPES)"></a>字符转义(CHARACTER ESCAPES)</h1><p>这里就是说<code>&lt; &gt;</code>这些会被html解析的特殊符号怎么输入到文本中.当你必须要使用html中定义好的特殊字符的时候.有两种方式如下:</p>
<ol>
<li><p>使用字符的预定义缩写名称（称为命名实体)</p>
</li>
<li><p>使用一个与其在编码字符集（数字实体）中的位置相对应的数字值。数值可以是十进制或十六进制格式。</p>
</li>
</ol>
<p>这两种方式开头都是用<code>&amp;</code>字符结尾都是使用<code>;</code>冒号结尾.如下面给出的例子:</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;p&gt;3 tsp. &amp;lt; 3 Tsp.&lt;/p&gt; //或者</span><br><span class="line">&lt;p&gt;3 tsp. &amp;#060; 3 Tsp.&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<p><code>结果如下:</code></p>
<p>3 tsp. &lt; 3 Tsp.</p>
<p>3 tsp. &#060; 3 Tsp.</p>

<h2 id="特殊字符转义表"><a href="#特殊字符转义表" class="headerlink" title="特殊字符转义表"></a>特殊字符转义表</h2><table>
<thead>
<tr>
<th>字符</th>
<th>描述</th>
<th>实体名字</th>
<th>十进制数</th>
<th>16进制数</th>
</tr>
</thead>
<tbody><tr>
<td>&lt;</td>
<td>小于号</td>
<td>&lt;</td>
<td>&#060;</td>
<td>&#x3C;</td>
</tr>
</tbody></table>
<blockquote>
<p>|大于号|&gt;|&#062;|&#x3E;<br>“|双引号|&quot;|&#034;|&#x22;<br>‘|单引号|&apos;|&#039;|&#x27;<br>&amp;|&amp;符号|&amp;|&#038;|&#x26;<br>无|不换行空格|&nbsp;|&#160;|&#xA0;<br>无|en space|&ensp;|&#8194;|&#x2002;<br>无|em space|&emsp;|&#8195;|&#x2003;<br>无|Zero-width space|无|&#8203;|&#x200B;<br>无|Zero-width non-joiner|&zwnj;|&#8204;|&amp;#200C;<br>无|Zero-width joiner|&zwj;|&#8205;|&#x200D;</p>
</blockquote>
<p>了解更多的特殊字符转义可以点击(<a href="https://www.webstandards.org/learn/reference/charts/entities/">https://www.webstandards.org/learn/reference/charts/entities/</a>) 网页查找.</p>
<h1 id="文本元素回顾"><a href="#文本元素回顾" class="headerlink" title="文本元素回顾"></a>文本元素回顾</h1><h2 id="页面部分"><a href="#页面部分" class="headerlink" title="页面部分"></a>页面部分</h2><ul>
<li>address  作者联系信息区域</li>
<li>article  独立的内容容器.	</li>
<li>aside    附加内容,侧边栏</li>
<li>footer   页脚,相关内容</li>
<li>header   前言,开场介绍,导航等</li>
<li>nav      主要导航</li>
<li>section  内容分组的概念.和div一样,语义更明确.</li>
</ul>
<h2 id="头部内容"><a href="#头部内容" class="headerlink" title="头部内容"></a>头部内容</h2><ul>
<li>h1….h6   标题头,级别1到6</li>
</ul>
<h2 id="分组内容元素和属性"><a href="#分组内容元素和属性" class="headerlink" title="分组内容元素和属性"></a>分组内容元素和属性</h2><ul>
<li>blockquote 块引用				<ul>
<li>cite   应用内容的URL</li>
</ul>
</li>
<li>div 		 通用盒子</li>
<li>figure     关联图片或资源</li>
<li>figcaption 对figure的文本描述</li>
<li>hr 		 水平线</li>
<li>main 		 页面主要内容区域</li>
<li>p 		 段落</li>
<li>pre        预格式化文本.</li>
</ul>
<h2 id="列表元素和属性"><a href="#列表元素和属性" class="headerlink" title="列表元素和属性"></a>列表元素和属性</h2><ul>
<li>dl 	定义一个描述列表</li>
<li>dt 	定义一个条目</li>
<li>dd 	对条目的解释描述</li>
<li>ol 	定义一个有序列表<ul>
<li>reversed 	列表中的数字顺序倒置</li>
<li>start 	对列表的起始数字进行指定</li>
</ul>
</li>
<li>ul 	定一个无序列表</li>
<li>li 	条目列表<ul>
<li>value 在有序列表中提供一个指定数字</li>
</ul>
</li>
</ul>
<h2 id="换行"><a href="#换行" class="headerlink" title="换行"></a>换行</h2><ul>
<li>br 	直接换行</li>
<li>wbr 	对单词进行换行分割</li>
</ul>
<h2 id="语句元素和属性"><a href="#语句元素和属性" class="headerlink" title="语句元素和属性"></a>语句元素和属性</h2><ul>
<li>abbr 		缩略词,会在文本下加上点点效果</li>
<li>b 		粗体</li>
<li>bdi 		双向隔离</li>
<li>bdo 		双向超控,可以用dir属性去设置文字的方向</li>
<li>cite  	引用</li>
<li>code 		代码例子</li>
<li>data 		机器可读的等式</li>
<li>del 		已删除的文本<ul>
<li>cite  引用内容的URL</li>
<li>datetime 指定变化的日期时间</li>
</ul>
</li>
<li>dfn 		定义条目</li>
<li>em 		强调</li>
<li>i 		斜体</li>
<li>ins 		插入文本<ul>
<li>cite 	引用内容的URL</li>
<li>datetime 指定变化的日期时间</li>
</ul>
</li>
<li>kbd 		键盘输入</li>
<li>mark 		高亮文本</li>
<li>q 		短行内引用<br>  cite 	引用内容的URL</li>
<li>ruby 		包含ruby文本的部分</li>
<li>rp 		ruby中的插入语</li>
<li>rt 		ruby注释</li>
<li>s 		错误文本.贯穿线</li>
<li>samp 		输出例子</li>
<li>small 	展示更小的字体</li>
<li>span 		通用语句盒子</li>
<li>strong 	强调重要性</li>
<li>sub 		下标</li>
<li>sup 		上标</li>
<li>time 		机器可读时间数据<ul>
<li>datetime 	提供给机器可读的日期时间</li>
<li>pubdate 	表明一个发布的时间</li>
</ul>
</li>
<li>u  		下划线</li>
</ul>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="https://zhangbo4881820.gitee.io/myblog">brad 随风起舞</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://zhangbo4881820.gitee.io/myblog/posts/16124/">https://zhangbo4881820.gitee.io/myblog/posts/16124/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://zhangbo4881820.gitee.io/myblog" target="_blank">静待花开</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/myblog/tags/HTML/">HTML</a></div><div class="post_share"><div class="social-share" data-image="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/myblog/posts/65085/" title="html-study-03"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">html-study-03</div></div></a></div><div class="next-post pull-right"><a href="/myblog/posts/16316/" title="html-study-01"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">html-study-01</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/myblog/posts/16316/" title="html-study-01"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-11-11</div><div class="title">html-study-01</div></div></a></div><div><a href="/myblog/posts/15484/" title="html-study-04"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-11-14</div><div class="title">html-study-04</div></div></a></div><div><a href="/myblog/posts/65085/" title="html-study-03"><div class="cover" style="background: var(--default-bg-color)"></div><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2019-11-13</div><div class="title">html-study-03</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="this.onerror=null;this.src='/myblog/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">brad 随风起舞</div><div class="author-info__description">有些事情需要一辈子的沉淀</div></div><div class="card-info-data site-data is-center"><a href="/myblog/archives/"><div class="headline">文章</div><div class="length-num">57</div></a><a href="/myblog/tags/"><div class="headline">标签</div><div class="length-num">20</div></a><a href="/myblog/categories/"><div class="headline">分类</div><div class="length-num">25</div></a></div><a id="card-info-btn" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/xxxxx" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:xxxxxx@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#PARAGRAPHS"><span class="toc-number">1.</span> <span class="toc-text">PARAGRAPHS</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#HEADINGS"><span class="toc-number">2.</span> <span class="toc-text">HEADINGS</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#THEMATIC-BREAKS-HORIZONTAL-RULE"><span class="toc-number">3.</span> <span class="toc-text">THEMATIC BREAKS (HORIZONTAL RULE)</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#LISTS"><span class="toc-number">4.</span> <span class="toc-text">LISTS</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8"><span class="toc-number">4.1.</span> <span class="toc-text">无序列表</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8"><span class="toc-number">4.2.</span> <span class="toc-text">有序列表</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%8F%E8%BF%B0%E5%88%97%E8%A1%A8"><span class="toc-number">4.3.</span> <span class="toc-text">描述列表</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%9B%B4%E5%A4%9A%E7%9A%84%E5%86%85%E5%AE%B9%E5%85%83%E7%B4%A0"><span class="toc-number">5.</span> <span class="toc-text">更多的内容元素</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Long-Quotations"><span class="toc-number">5.1.</span> <span class="toc-text">Long Quotations</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Preformatted-Text"><span class="toc-number">5.2.</span> <span class="toc-text">Preformatted Text</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Figures"><span class="toc-number">5.3.</span> <span class="toc-text">Figures</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%BB%84%E7%BB%87%E9%A1%B5%E9%9D%A2%E5%86%85%E5%AE%B9"><span class="toc-number">6.</span> <span class="toc-text">组织页面内容</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#html5%E7%9A%84%E6%96%B0%E5%85%83%E7%B4%A0"><span class="toc-number">6.1.</span> <span class="toc-text">html5的新元素</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E9%9B%86%E5%90%88"><span class="toc-number">7.</span> <span class="toc-text">行内元素集合</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Emphasized-text"><span class="toc-number">7.1.</span> <span class="toc-text">Emphasized text</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Important-text"><span class="toc-number">7.2.</span> <span class="toc-text">Important text</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#b"><span class="toc-number">7.3.</span> <span class="toc-text">b</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#i"><span class="toc-number">7.4.</span> <span class="toc-text">i</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#s"><span class="toc-number">7.5.</span> <span class="toc-text">s</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#u"><span class="toc-number">7.6.</span> <span class="toc-text">u</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#small"><span class="toc-number">7.7.</span> <span class="toc-text">small</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Short-quotations"><span class="toc-number">7.8.</span> <span class="toc-text">Short quotations</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Abbreviations-and-acronyms"><span class="toc-number">7.9.</span> <span class="toc-text">Abbreviations and acronyms</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Citations"><span class="toc-number">7.10.</span> <span class="toc-text">Citations</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Defining-terms"><span class="toc-number">7.11.</span> <span class="toc-text">Defining terms</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Program-code-elements"><span class="toc-number">7.12.</span> <span class="toc-text">Program code elements</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Subscript-and-SuperScript"><span class="toc-number">7.13.</span> <span class="toc-text">Subscript and SuperScript</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Highlighted-text"><span class="toc-number">7.14.</span> <span class="toc-text">Highlighted text</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Dates-and-times"><span class="toc-number">7.15.</span> <span class="toc-text">Dates and times</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Machine-readable-information"><span class="toc-number">7.16.</span> <span class="toc-text">Machine-readable information</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Inserted-and-deleted-text"><span class="toc-number">7.17.</span> <span class="toc-text">Inserted and deleted text</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Adding-Breaks"><span class="toc-number">7.18.</span> <span class="toc-text">Adding Breaks</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%80%9A%E7%94%A8%E5%85%83%E7%B4%A0-DIV%E5%92%8CSPAN"><span class="toc-number">8.</span> <span class="toc-text">通用元素(DIV和SPAN)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8div%E5%88%86%E9%9A%94%E5%86%85%E5%AE%B9"><span class="toc-number">8.1.</span> <span class="toc-text">使用div分隔内容</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8span%E5%AE%9A%E4%B9%89%E8%AF%AD%E5%8F%A5"><span class="toc-number">8.2.</span> <span class="toc-text">使用span定义语句</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#id-and-class-Attributes"><span class="toc-number">8.3.</span> <span class="toc-text">id and class Attributes</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7"><span class="toc-number">8.3.1.</span> <span class="toc-text">全局属性</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8ARIA%E6%9D%A5%E6%94%B9%E5%96%84%E8%AE%BF%E9%97%AE%E6%80%A7"><span class="toc-number">9.</span> <span class="toc-text">使用ARIA来改善访问性</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#Roles"><span class="toc-number">9.1.</span> <span class="toc-text">Roles</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#States%E5%92%8CProperties"><span class="toc-number">9.2.</span> <span class="toc-text">States和Properties</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E8%BD%AC%E4%B9%89-CHARACTER-ESCAPES"><span class="toc-number">10.</span> <span class="toc-text">字符转义(CHARACTER ESCAPES)</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%E8%BD%AC%E4%B9%89%E8%A1%A8"><span class="toc-number">10.1.</span> <span class="toc-text">特殊字符转义表</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%87%E6%9C%AC%E5%85%83%E7%B4%A0%E5%9B%9E%E9%A1%BE"><span class="toc-number">11.</span> <span class="toc-text">文本元素回顾</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E9%83%A8%E5%88%86"><span class="toc-number">11.1.</span> <span class="toc-text">页面部分</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%B4%E9%83%A8%E5%86%85%E5%AE%B9"><span class="toc-number">11.2.</span> <span class="toc-text">头部内容</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%86%E7%BB%84%E5%86%85%E5%AE%B9%E5%85%83%E7%B4%A0%E5%92%8C%E5%B1%9E%E6%80%A7"><span class="toc-number">11.3.</span> <span class="toc-text">分组内容元素和属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%97%E8%A1%A8%E5%85%83%E7%B4%A0%E5%92%8C%E5%B1%9E%E6%80%A7"><span class="toc-number">11.4.</span> <span class="toc-text">列表元素和属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8D%A2%E8%A1%8C"><span class="toc-number">11.5.</span> <span class="toc-text">换行</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%AD%E5%8F%A5%E5%85%83%E7%B4%A0%E5%92%8C%E5%B1%9E%E6%80%A7"><span class="toc-number">11.6.</span> <span class="toc-text">语句元素和属性</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/myblog/posts/15695/" title="jenkins（1）">jenkins（1）</a><time datetime="2023-09-14T02:17:44.000Z" title="发表于 2023-09-14 10:17:44">2023-09-14</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/myblog/posts/22012/" title="wsl的Ubuntu子系统（1）">wsl的Ubuntu子系统（1）</a><time datetime="2023-09-13T08:42:19.000Z" title="发表于 2023-09-13 16:42:19">2023-09-13</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/myblog/posts/30302/" title="effective-java-(接口优于抽象类)">effective-java-(接口优于抽象类)</a><time datetime="2023-09-12T08:12:48.000Z" title="发表于 2023-09-12 16:12:48">2023-09-12</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/myblog/posts/9473/" title="effective-java(创建和销毁对象--组合的形式优于继承)">effective-java(创建和销毁对象--组合的形式优于继承)</a><time datetime="2023-09-11T08:23:19.000Z" title="发表于 2023-09-11 16:23:19">2023-09-11</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/myblog/posts/16107/" title="Hello World">Hello World</a><time datetime="2023-09-07T09:44:01.910Z" title="发表于 2023-09-07 17:44:01">2023-09-07</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By brad 随风起舞</div><div class="framework-info"><span>框架 </span><a href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/myblog/js/utils.js"></script><script src="/myblog/js/main.js"></script><script src="/myblog/js/fancybox.umd.js"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div class="no-result" id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/myblog/js/search/local-search.js"></script></div></div></body></html>